<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
  <div>
    <Row class="search-info-style" style="margin: 15px 0">
      <Col style="float: left">
        <Input
          v-model="value"
          placeholder="请输入资产名称"
          style="width: 200px"
        ></Input>
        <Button
          class="new-btn-sty"
          type="success"
          style="margin-left: 5px"
          @click="search"
          ><Icon type="primary" />查询</Button
        >
      </Col>
      <Col style="float: right" pull="1">
        <Button class="new-btn-sty" type="primary" @click="add"
          ><Icon type="primary" /> 添加</Button
        >
      </Col>
    </Row>

    <vxe-table
      resizable
      border
      ref="xTree"
      row-id="row.id"
      show-overflow="tooltip"
      highlight-hover-row
      align="center"
      header-align="center"
      :data.sync="tableData"
    >
      <vxe-table-column field="assets_name" title="资产名称"></vxe-table-column>
      <vxe-table-column
        field="assets_model"
        title="规格型号"
      ></vxe-table-column>
      <vxe-table-column
        field="assets_coding"
        title="唯一编码"
      ></vxe-table-column>
      <vxe-table-column field="assets_type" title="资产类型"></vxe-table-column>
      <vxe-table-column
        field="assets_signboard"
        title="资产标识"
      ></vxe-table-column>
      <vxe-table-column field="assets_firm" title="生产厂商"></vxe-table-column>
      <vxe-table-column
        field="assets_supplier"
        title="供应商"
      ></vxe-table-column>
      <vxe-table-column field="assets_quantity" title="数量"></vxe-table-column>

      <vxe-table-column min-width="130px" title="操作">
        <template slot-scope="{ row }">
          <Button
            size="small"
            class="actionBtn"
            style="margin-right: 5px"
            type="warning"
            @click="edit(row)"
            >修改</Button
          >
          <Button
            size="small"
            class="actionBtn"
            type="error"
            style="margin-right: 5px"
            @click="del(row.id)"
            >删除</Button
          >

          <Button
            size="small"
            class="actionBtn"
            type="info"
            @click="showLog(row.id)"
            >操作记录</Button
          >
        </template>
      </vxe-table-column>
    </vxe-table>
    <div
      class="page"
      style="padding: 20px 0; display: flex; justify-content: right"
    >
      <Page
        :total="totalRecord"
        :page-size="pageSize"
        show-total
        @on-change="currentChange"
      ></Page>
    </div>

    <!-- 添加对话框 -->
    <Modal v-model="show" title="添加资产" @on-ok="ok">
      <Form ref="formCustom" :model="formCustom" :label-width="80">
        <Form-item label="资产名称">
          <Input type="text" v-model="formCustom.assets_name"></Input>
        </Form-item>

        <Form-item label="规格型号">
          <Input type="text" v-model="formCustom.assets_model"></Input>
        </Form-item>

        <Form-item label="唯一编码">
          <Input type="text" v-model="formCustom.assets_coding"></Input>
        </Form-item>

        <Form-item label="资产类型">
          <Input type="text" v-model="formCustom.assets_type"></Input>
        </Form-item>

        <Form-item label="资产标识">
          <Input type="text" v-model="formCustom.assets_signboard"></Input>
        </Form-item>

        <Form-item label="生产厂商">
          <Input type="text" v-model="formCustom.assets_firm"></Input>
        </Form-item>

        <Form-item label="供应商">
          <Input type="text" v-model="formCustom.assets_supplier"></Input>
        </Form-item>

        <Form-item label="数量">
          <Input
            type="text"
            v-model="formCustom.assets_quantity"
            number
          ></Input>
        </Form-item>
      </Form>
    </Modal>

    <!-- 日志 -->
    <Modal v-model="logShow" title="操作记录" width="1100">
      <Table :columns="columns1" :data="logList"></Table>
      <div style="display: flex; justify-content: right">
        <Page
          :total="logTotal"
          :page-size="logPageSize"
          show-total
          @on-change="logCurrentChange"
          style="margin: 20px 0"
        ></Page>
      </div>
    </Modal>
  </div>
</template>

<script>
import {
  findAssetsList,
  saveAssets,
  delAssets,
  setAssets,
  findAssetsLogList
} from '@/api/asset';

export default {
  data() {
    return {
      formCustom: {},
      pageNo: 1,
      pageSize: 10,
      totalRecord: null,
      tableData: [],
      show: false,
      logShow: false,
      logList: [],
      columns1: [
        {
          title: '资产名称',
          key: 'assets_name',
          align: 'center'
        },
        {
          title: '规格型号',
          key: 'assets_model',
          align: 'center'
        },
        {
          title: '资产编码',
          key: 'assets_coding',
          align: 'center'
        },
        {
          title: '资产类型',
          key: 'assets_type',
          align: 'center'
        },
        {
          title: '资产标识',
          key: 'assets_signboard',
          align: 'center'
        },
        {
          title: '生产厂商',
          key: 'assets_firm',
          align: 'center'
        },
        {
          title: '供应商',
          key: 'assets_supplier',
          align: 'center'
        },
        {
          title: '数量',
          key: 'assets_quantity',
          align: 'center'
        },

        {
          title: '操作时间',
          key: 'create_time',
          align: 'center',
          width: 180
        },

        {
          title: '操作',
          key: 'type',
          align: 'center',
          render: (h, params) => {
            if (params.row.type == 1) {
              return h('span', '修改操作');
            } else if (params.row.type == 2) {
              return h('span', '删除操作');
            }
          }
        }
      ],
      id: null,

      logPageNo: 1,
      logPageSize: 10,
      logTotal: null,
      value: ''
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    search() {
      this.pageNo = 1;
      this.init();
    },
    init() {
      let data = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        assets_name: this.value
      };
      findAssetsList(data).then((res) => {
        if (res.data.errcode == 0) {
          this.tableData = res.data.data.page.results;
          this.totalRecord = res.data.data.page.totalRecord;
        }
      });
    },
    currentChange(val) {
      this.pageNo = val;
      this.init();
    },
    add() {
      this.formCustom = {
        assets_name: '',
        assets_model: '',
        assets_coding: '',
        assets_type: '',
        assets_signboard: '',
        assets_firm: '',
        assets_supplier: '',
        assets_quantity: 0
      };
      this.show = true;
    },
    ok() {
      if (this.formCustom.id) {
        this.formCustom.update_by = this.$store.state.user.userId;
        setAssets(this.formCustom).then((res) => {
          if (res.data.errcode == 0) {
            this.$Message.info('操作成功');
            this.init();
          } else {
            this.$Message.error(res.data.errmsg);
          }
        });
      } else {
        this.formCustom.create_by = this.$store.state.user.userId;
        saveAssets(this.formCustom).then((res) => {
          if (res.data.errcode == 0) {
            this.$Message.info('操作成功');
            this.init();
          } else {
            this.$Message.error(res.data.errmsg);
          }
        });
      }
    },
    del(id) {
      if (confirm('确定删除吗?')) {
        let data = {
          id: id,
          del_flag: 1
        };
        delAssets(data).then((res) => {
          if (res.data.errcode == 0) {
            this.$Message.info('删除成功');
            this.init();
          } else {
            this.$Message.error(res.data.errmsg);
          }
        });
      }
    },
    edit(row) {
      this.formCustom.assets_name = row.assets_name;
      this.formCustom.assets_model = row.assets_model;
      this.formCustom.assets_coding = row.assets_coding;
      this.formCustom.assets_type = row.assets_type;
      this.formCustom.assets_signboard = row.assets_signboard;
      this.formCustom.assets_firm = row.assets_firm;
      this.formCustom.assets_supplier = row.assets_supplier;
      this.formCustom.assets_quantity = row.assets_quantity;
      this.formCustom.id = row.id;
      this.formCustom.del_flag = row.del_flag;
      this.formCustom.status = row.status;
      this.show = true;
    },

    showLog(id) {
      this.id = id;

      let data = {
        assets_id: this.id,
        pageNo: this.logPageNo,
        pageSize: this.logPageSize
      };

      findAssetsLogList(data).then((res) => {
        this.logTotal = res.data.data.page.totalRecord;
        if (res.data.errcode == 0) {
          this.logList = res.data.data.page.results;
          this.logShow = true;
        } else {
          this.$Message.error(res.data.data.errmsg);
        }
      });
    },

    logCurrentChange(val) {
      this.logPageNo = val;

      this.showLog(this.id);
    }
  }
};
</script>
<style>
</style>